<template>
  <div>


  <!-- 操作按钮区域 -->
  <div class="table-operator">
    <a-button  type="primary" icon="plus">新增</a-button>
    <a-button @click="getTaskList" type="primary" icon="search">查询</a-button>
<!--    <a-dropdown v-if="selectedRowKeys.length > 0">-->
<!--      <a-menu slot="overlay">-->
<!--        <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>-->
<!--        <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />暂停</a-menu-item>-->
<!--        <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />执行</a-menu-item>-->
<!--      </a-menu>-->
<!--      <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
<!--    </a-dropdown>-->
  </div>
  <div class="card-container">
    <a-card  class="card-item" v-for="task in taskList" :key="task.tid">
      <div class="t-title-container">
        <h3>{{task.taskName}}</h3>
        <span>状态：{{ task.taskState === 'running' ? '进行中' : task.status === 'stop' ? '停止' : '未知状态' }}</span>
      </div>
      <span class="task-span">{{task.taskDesc}}</span>
      <a-divider style="margin: 10px 0px"></a-divider>
      <div class="time-container">
        <span class="start-time">创建时间：{{task.createTime}}</span>
        <span class="end-time">修改时间：{{task.updateTime}}</span>
      </div>
      <a-divider style="margin: 10px 0px"></a-divider>
      <div>
        <a @click="processArrange(task)">流程编排</a> <a-divider type="vertical" style="height: 20px; border-color: #7cb305" dashed />
        <a @click="handleTaskDetail(task)">查看详情</a> <a-divider type="vertical" style="height: 20px; border-color: #7cb305" dashed />
        <a @click="handleTaskEdit(task)">修改</a>  <a-divider type="vertical" style="height: 20px; border-color: #7cb305" dashed />
        <a @click="handleTaskDelete(task)">删除</a>
      </div>
    </a-card>
  </div>

    <TaskInfoModal ref="confForm" @ok="modalFormOk"></TaskInfoModal>

  </div>

</template>

<script>
import { Card, Pagination } from 'ant-design-vue';
import { editCollectTask, addCollectTask,listCollectTask } from '@/api/apiDs'
import TaskInfoModal from './TaskInfoModal'

export default {
  components: {
    ACard: Card,
    TaskInfoModal
  },
  data() {
    return {
      taskList:[]
    }
  },
  created() {
    this.getTaskList();
  },
  methods: {
    getTaskList(){
      let params = {}
      listCollectTask(params).then(res => {
        if(res.success){
          this.taskList = res.result
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    modalFormOk(){
      this.getTaskList()
    },
    handleTaskDetail: function (record) {
      this.$refs.confForm.showInfo(record)
      this.$refs.confForm.title = '详情'
      this.$refs.confForm.disableSubmit = true;
    },

    handleTaskEdit: function (record) {
      this.$refs.confForm.edit(record)
      this.$refs.confForm.title = '编辑'
    },
    handleTaskDelete:function(record){
      this.$message.warning("暂不支持删除",1000)
    },
    processArrange:function(record){
      // this.$router.push('/taskflow',params:{ data: '我是要传递的参数' });
      // this.$router.push({path:'/taskflow',query: {data:'1'}})
      //跳转窗口，并且传入相关参数
      //this.$router.push({name:'taskflow',params: {taskId:record.tid,name:record.taskName}})

      const url = `${window.location.origin}/taskflow?taskId=${record.tid}&name=${encodeURIComponent(record.taskName)}`
      window.open(url, '_blank')
    }
  }

}
</script>

<style>
.card-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.card-item {
  width:400px;
  margin-right: 16px; /* 可根据需要调整卡片之间的间距 */
  margin-bottom: 16px; /* 可根据需要调整卡片之间的间距 */
}

.card-item:last-child {
  margin-right: 0; /* 最后一个卡片的右边距为0 */
}


/* 指定最大行数为1行，并且使用省略号来表示被截断的内容 */
.task-span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.time-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.t-title-container {
  display: flex;
  justify-content: space-between;
}


</style>

